<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折叠菜单</title>
    <style>
      a:link,a:visited{ color: #222;text-decoration: none;}
      a:hover{color: #fd4913;}
      body{width: 340px;margin: 0 auto;}
      ul li{line-height: 38px;font-size: 18px;}
      ul{list-style:none;padding:0;margin:0}
      div{width:150px;border:1px solid #515E7B;margin:10px;}
      div li{background:#515E7B;border-bottom:1px solid #fff;}
      div li a{text-decoration:none;color:#fff;font-size:16px;height:40px;line-height:40px;padding-left:10px;}
      div li a:hover{text-decoration:underline;}
      .wrap {width:150px;display:none;}
      .wrap li{background: #fff;margin: 0;}
      .wrap li a{color:#3B475F;font-size:12px;}
    </style>
  </head>
  <body>
      <h2>折叠菜单</h2>
    <div id="fold"><ul>
        <li><a href="#">信息管理</a><ul class="wrap">
            <li><a href="#">未读信息</a></li>
            <li><a href="#">已读信息</a></li>
            <li><a href="#">信息列表</a></li>
          </ul></li>
        <li><a href="#">商品管理</a><ul class="wrap">
            <li><a href="#">商品添加</a></li>
            <li><a href="#">商品列表</a></li>
            <li><a href="#">商品分类</a></li>
          </ul></li>
        <li><a href="#">用户管理</a><ul class="wrap">
            <li><a href="#">权限设置</a></li>
            <li><a href="#">用户列表</a></li>
            <li><a href="#">重置密码</a></li>
          </ul></li>
      </ul></div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
      // 默认情况下，显示第一个分类下的菜单
      $('#fold>ul>li:first').find('.wrap').css({display: 'block'});
      // 根据用户单击，折叠或展开对应的菜单
      $('#fold>ul>li').click(function() {
        $(this).siblings('li').find('.wrap').css({display: 'none'});
        $(this).find('.wrap').css({display: 'block'});
      });
    </script>
    <p><a href="default.html">返回目录</a></p>
    <p><a href="第十一章.html">返回第十一章</a></p>
    <p><a href="左移与右移.html">下一题</a></p>
  </body>
</html>